<template><div>
<div style="display: flex;flex-direction: row;justify-content: space-around;">
  <div id="myChart" :style="{ width: '500px', height: '500px' }"></div>
  <div id="myChartline" :style="{ width: '500px', height: '500px' }"></div>
</div>
<div style="display: flex;flex-direction: row;justify-content: space-around;">
  <div id="myChartbar2" :style="{ width: '500px', height: '500px' }"></div>
  <div id="myChartline2" :style="{ width: '500px', height: '500px' }"></div>

</div>
</div>
</template>
<script>
import { runInDebugContext } from 'vm';

export default {
  name: 'Echarts',
  data() {
    return {
      msg: 'Welcome use Echarts',
      goodslist:[],
      goodsnumber:[],
      oederlist:[],
      ordertimel:[],
      sjcrtimel:[],
      sjnum:[],
      adtimel:[],
      adnum:[]
    }
  },
  BeforeUnloadEvent(){
    
   
    //     this.drawBar();
    // this.drawLine();
    // this.drawBar2();
    // this.drawLine2();
    },
  
  activated() {
    this.getgoodsList();
    this.getgetordernum();
    this. getsjnum();
    
   this.getadtime();
    // console.log(2)
  },
  methods: {
    getadtime(){
      let i=0
        this.$http({
          url:this.$http.adornUrl("/admin/echarts/getadtime"),
          method:"GET"
        }).then(({data})=>{
          console.log(data)
          console.log(JSON.stringify (data.adtimeMap[0]))
          for(;i<data.adtimeMap.length;i++){
            this.adtimel.push(data.adtimeMap[i].datel)
            this.adnum.push(data.adtimeMap[i].num)
          }    
          this.drawLine2();
        })
       
    },
    getsjnum(){
      let i=0
        this.$http({
          url:this.$http.adornUrl("/admin/echarts/getsjnum"),
          method:"GET"
        }).then(({data})=>{
          console.log(data)
          console.log(JSON.stringify (data.sjnumMap[0]))
          for(;i<data.sjnumMap.length;i++){
            this.sjcrtimel.push(data.sjnumMap[i].datel)
            this.sjnum.push(data.sjnumMap[i].num)
          }    
          this.drawBar2(); 
        })
       

    },
    getgetordernum(){
      let i=0
        this.$http({
          url:this.$http.adornUrl("/admin/echarts/getordernum"),
          method:"GET"
        }).then(({data})=>{
          // console.log(data)
          // console.log(JSON.stringify (data.orderMap[0]))
          for(;i<data.orderMap.length;i++){
            this.oederlist.push(data.orderMap[i].datel)
            this.ordertimel.push(data.orderMap[i].num)
          }
          this.drawLine();

          
        })
    },
   getgoodsList(){
      let i=0
        this.$http({
          url:this.$http.adornUrl("/admin/echarts/getgoods"),
          method:"GET"
        }).then(({data})=>{
          console.log(JSON.stringify (data.goodsList[0]))
          for(;i<data.goodsList.length;i++){
            this.goodslist.push(data.goodsList[i].goods_name)
            this.goodsnumber.push(data.goodsList[i].num)
          }
          this.drawBar();

          
        })
    },

    drawBar() {
      console.log(this.goodslist)

      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        title: { text: '热销前十商品' },
        tooltip: {},
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data:this.goodslist.reverse()
        },
        series: [{
          name: '销量',
          type: 'bar',
          data: this.goodsnumber.reverse(),
          barWidth:30,
          itemStyle:{
            normal:{
              color: 	'#00BFFF'
            }
          }

        }]
      });
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChartline = this.$echarts.init(document.getElementById('myChartline'))
      // 绘制图表
      myChartline.setOption ( {
        title: {
          text: '七日订单'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
         
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.oederlist
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '订单量',
            type: 'line',
            stack: 'Total',
            data: this.ordertimel
          },
         
        ]
      });
    },
    drawBar2(){
      // console.log(this.sjcrtimel)
      // 基于准备好的dom，初始化echarts实例
      let myChartbar2 = this.$echarts.init(document.getElementById('myChartbar2'))
      // 绘制图表
      myChartbar2.setOption({
        title: { text: '七日司机注册量' },
        tooltip: {},
        xAxis: {
          data: this.sjcrtimel
        },
        yAxis: {},
        series: [{
          name: '数量',
          type: 'bar',
          data: this.sjnum
        }]
      });
    },
    drawLine2() {
      // 基于准备好的dom，初始化echarts实例
      let myChartline2 = this.$echarts.init(document.getElementById('myChartline2'))
      // 绘制图表
      myChartline2.setOption ( {
        title: {
          text: '七日内广告播放'
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.adtimel.reverse()
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '分钟数',
            type: 'line',
            stack: 'Total',
            data: this.adnum.reverse()
          },
        
        ]
      });
    },
  }
}
</script>